<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="h100p">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" fixed backgroundColor="#FF7C00">
        <block slot="left">
          <uni-icons color="white" class="icon-left" @click="navigateBackPage" type="left" size="23"></uni-icons>
        </block>
        <block>
          <view class="leftLabel cWH">置顶申请</view>
        </block>
      </uni-nav-bar>
    </view>
    <scroll-view scroll-y class="contentBox" :style="globalData.appStyle.contentStyle">
      <view class="top-box flc">
        <text class="common-title">顶部曝光</text>
        <text class="common-desc">置顶后，您发布的需求信息会展示在销售列表顶部，获得更多曝光</text>
        <text class="common-title">置顶标识</text>
        <text class="common-desc">
          <text>置顶后，您发布的需求信息拥有</text>
          <text class="orange-desc">“置顶”</text>
          <text>专属标签，吸引更多用户点击</text>
        </text>
      </view>
      <view class="top-desc mt10">
        <text class="common-title">购买须知</text>
        <view class="flc common-desc-next">
          <text>1.使用积分购买置顶后立即生效，可在对应分类进行查看。</text>
          <text style="line-height: 15rem">2.当置顶了多条记录时，仅第一条记录是在最上方，其他置顶信息需向下翻页查看。</text>
          <text>3.该产品属于数字化产品，购买后不支持退款。</text>
          <text>4.如您需要更多咨询，可在线咨询客服。</text>
        </view>
      </view>
      <view class="center-action mt15">
        <view class="flca flb" style="margin-bottom: 20rem">
          <view class="zd-time-btn">置顶时长</view>
          <view class="zd-time-desc flca">
            <img src="@/static/img/global/time-icon.png" alt="" class="time-icon" />
            <text> 预计{{ calculateResult }}到期 </text>
          </view>
        </view>

        <view v-for="(item, key) in selectList" :key="key" @click="setSelectTag(key)" :class="{ 'common-box flb mt10': true, 'border-style': key === selectedTag }">
          <view v-if="key === selectedTag" class="xz">
            <uni-icons type="checkmarkempty" class="icon-yes" size="15"></uni-icons>
          </view>
          <view class="days-label">{{ item.toppingDay }}天</view>
          <view>
            <text class="source text-with-line">原价{{ item.oldPrice }}积分</text>
            <text class="days-label" style="padding: 0 5rem 0 10rem">{{ item.nowPrice }}</text>
            <text class="jf">积分</text>
          </view>
        </view>
      </view>
      <FixedBottomBtnCustom :oneBtn="true" :btnText="['确定置顶']" @btnFun="confirm" />
    </scroll-view>
  </view>
</template>

<script>
const api = require('@/utils/request.js');
import commonMxins from '@/mixins/common.js';
import FixedBottomBtnCustom from '@/component/FixedBottomBtnCustom.vue';
export default {
  mixins: [commonMxins],
  components: {
    FixedBottomBtnCustom
  },
  data() {
    return {
      calculateResult: '', // 时间计算结果
      selectList: [],
      selectedTag: 0,
      saleInfoId: ''
    };
  },
  onShow() {},
  onLoad(options) {
    const { saleInfoId } = options;
    this.saleInfoId = saleInfoId;
    this.queryBaseInfo();
  },
  methods: {
    // 选中数据展示
    setSelectTag(tag) {
      this.selectedTag = tag;
      this.calculateTime();
    },
    calculateTime() {
      const { toppingDay } = this.selectList[this.selectedTag];
      const currentTime = new Date().getTime() + Number(toppingDay) * 86400000;
      this.calculateResult = this.timestampToYMDHMS(currentTime);
    },
    timestampToYMDHMS(timestamp) {
      const date = new Date(timestamp);
      const year = date.getUTCFullYear();
      const month = ('0' + (date.getUTCMonth() + 1)).slice(-2); // 月份是从0开始的
      const day = ('0' + date.getUTCDate()).slice(-2);
      const hours = ('0' + date.getHours()).slice(-2);
      const minutes = ('0' + date.getUTCMinutes()).slice(-2);
      // const seconds = ('0' + date.getUTCSeconds()).slice(-2);
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },

    // 回退
    navigateBackPage() {
      uni.navigateBack({ delta: 1 });
    },
    // 获取基础配置数据
    // 查询销售订单置顶配置
    async queryBaseInfo() {
      const res = await api.request({ url: '/platformSetting/querySaleTopping', data: {}, method: 'GET' });
      this.selectList = res.data || [];
      this.calculateTime();
    },
    //  saleInfoId  销售信息id
    // toppingDay  置顶天数 整数
    // point  花费积分
    async confirm() {
      const { toppingDay, nowPrice } = this.selectList[this.selectedTag];
      const res = await api.request({ url: '/saleInfo/appTopping', data: { point: nowPrice, toppingDay, saleInfoId: this.saleInfoId }, method: 'GET' });
      if (res.code === 200) {
        this.navigateBackPage();
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'error',
          duration: 1500
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
